let path = getPath();
const dropdiv = [
    { id: "drop_A" },
    { id: "drop_B" },
    { id: "drop_C" },
    { id: "drop_D" }
];
const panels = [
    { id: 'p1', title: '待办事项', height: 470, hrefType: 'waitwork', src: 'M_DataPage/WaitWork/WaitWorkPortal.html' },
    // { id: 'p2', title: '工作计划', hrefType: 'workplan', src: 'M_DataPage/WorkPlan/WorkPlanPortal.html', height: 210 },
    { id: 'p3', title: '航运动态', height: 530, hrefType: 'boatinfo', src: 'M_DataPage/BoatInfo/BoatInfoPortal.html' },
    { id: 'p4', title: '当前工单', doubleheight: 550, height: 320, hrefType: '', src: 'M_DataPage/WorkOrder/WorkOrderPortal.html' },
    { id: 'p5', title: '工单统计', height: 290, hrefType: '', src: 'M_DataPage/WorkOrderStatistics/WorkStatisticsPortal.html' },
    { id: 'p6', title: '库存', hrefType: 'StockBalance', src: 'M_DataPage/StockBalance/StockBalancePortal.html', height: 270 },
    { id: 'p7', title: '产量', hrefType: '', src: 'M_DataPage/ProductionQty/ProductionQtyPortal.html', height: 210 },
    { id: 'p8', title: '资源消耗量', hrefType: '', src: 'M_DataPage/ProductionUseQty/ProductionUseQtyPortal.html', height: 210 },
    { id: 'p9', title: '设备运行参数', hrefType: 'Equipment_info', src: 'M_DataPage/Equipment_info/Equipment_infoPortal.html', height: 300 },
    { id: 'p10', title: '药剂使用情况', hrefType: 'Chem_Current_info', src: 'M_DataPage/Chem_Current_info/Chem_Current_infoPortal.html', height: 590 },
    { id: 'p11', title: '在船人数', hrefType: 'shipPeopleNum', src: 'M_DataPage/Ship_People_Num/Ship_People_NumPortal.html', height: 270 },
    { id: 'p12', title: '液货仓库存', hrefType: 'Liquid_Warehouse_Inventory', src: 'M_DataPage/Liquid_Warehouse_Inventory/InventoryPortal.html', height: 210 },
    { id: 'p13', title: '6S整改跟踪', hrefType: 'Rectify_reform', src: 'M_DataPage/Rectify_reform/rectify_reformPortal.html', height: 240 },
    { id: 'p14', title: 'HSE统计', hrefType: '', src: 'M_DataPage/Hse_report/Hse_reportPortal.html', height: 340 },
    { id: 'p15', title: '维修计划执行情况', hrefType: '', src: 'M_DataPage/Repair_Info/Repair_Info.html', height: 200 },
    { id: 'p16', title: '维修费用执行情况', hrefType: 'Repair_Cost_Info', src: 'M_DataPage/Repair_Cost_Info/Repair_Cost_InfoProtal.html', height: 310 },
    { id: 'p17', title: '平台监控数据', hrefType: 'Platform_Site', src: 'M_DataPage/Platform_Site/Platform_SiteProtal.html', height: 320, doubleheight: 550 }
];
// Platform_Site
//传参：看板角色
let UserRole = "";
// 用户ID
let id = getUrlParam("id");
//用于记录排序之后的数据
let drapA_Arr = [];
let drapB_Arr = [];
let drapC_Arr = [];
let drapD_Arr = [];
// //临时使用
// function choose(type) {
//     $('#btn_sh').removeClass("labelstyleChoose labelstyle");
//     $('#btn_ty').removeClass("labelstyleChoose labelstyle");
//     $('#btn_ys').removeClass("labelstyleChoose labelstyle");
//     $('#btn_fj').removeClass("labelstyleChoose labelstyle");
//     $('#btn_fj2').removeClass("labelstyleChoose labelstyle");

//     $('#btn_sh').addClass(type == "1" ? "labelstyleChoose" : "labelstyle");
//     $('#btn_ty').addClass(type == "2" ? "labelstyleChoose" : "labelstyle");
//     $('#btn_ys').addClass(type == "3" ? "labelstyleChoose" : "labelstyle");
//     $('#btn_fj').addClass(type == "4" ? "labelstyleChoose" : "labelstyle");
//     $('#btn_fj2').addClass(type == "5" ? "labelstyleChoose" : "labelstyle");
//     InitData(type);
// }

$(function () {
    console.log(id);
    GetUserRole();
    // LoadRegion();
    // InitData('总监');
    // GetWeather();

});
//获取用户权限
function GetUserRole() {
    // let thisdata = [];
    // thisdata.push(InitRole(id));
    let USERdata = InitRole(id);
    // console.log({ USERdata });
    if (USERdata != null) {
        $('#lab_UserName').html(USERdata.roleName);
        //初始化拖拽区域事件
        LoadRegion();
        //根据UserRole以及UserID，从后台获取数据
        InitData(USERdata.roleName);
        // choose("1");
        // GetWeather();
    }
    else OpenErrmsg("web/errhtml/404.html");
}

//获取人员查看面板权限及自定义面板数据，动态创建加载
function InitData(type) {
    $('.item').remove();
    //根据UserRole以及UserID，从后台获取数据
    let userData = [];
    if (type == "总监") {
        userData = [
            { id: 'p1', divid: 'drop_A', columnindex: 2 },
            { id: 'p2', divid: 'drop_A', columnindex: 3 },
            { id: 'p3', divid: 'drop_A', columnindex: 4 },
            { id: 'p4', divid: 'drop_B', columnindex: 1 },
            { id: 'p5', divid: 'drop_C', columnindex: 1 },
            { id: 'p6', divid: 'drop_C', columnindex: 2 },
            { id: 'p7', divid: 'drop_D', columnindex: 1 },
            { id: 'p8', divid: 'drop_D', columnindex: 2 }
        ];
    }
    else if (type == "生产监督") {
        userData = [
            { id: 'p1', divid: 'drop_A', columnindex: 2 },
            { id: 'p2', divid: 'drop_A', columnindex: 3 },
            { id: 'p3', divid: 'drop_A', columnindex: 4 },
            { id: 'p9', divid: 'drop_B', columnindex: 1 },
            { id: 'p10', divid: 'drop_C', columnindex: 1 },
            { id: 'p7', divid: 'drop_D', columnindex: 1 },
            { id: 'p8', divid: 'drop_D', columnindex: 2 }
        ];
    }
    else if (type == "系泊船长") {
        userData = [
            { id: 'p1', divid: 'drop_A', columnindex: 2 },
            { id: 'p2', divid: 'drop_A', columnindex: 3 },
            { id: 'p3', divid: 'drop_A', columnindex: 4 },
            { id: 'p12', divid: 'drop_B', columnindex: 1 },
            { id: 'p11', divid: 'drop_C', columnindex: 1 },
            { id: 'p17', divid: 'drop_D', columnindex: 1 },
            { id: 'p8', divid: 'drop_D', columnindex: 2 }
        ];
    }
    else if (type == "安全监督") {
        userData = [
            { id: 'p1', divid: 'drop_A', columnindex: 2 },
            { id: 'p2', divid: 'drop_A', columnindex: 3 },
            { id: 'p3', divid: 'drop_A', columnindex: 4 },
            { id: 'p4', divid: 'drop_B', columnindex: 1 },
            { id: 'p5', divid: 'drop_B', columnindex: 2 },
            { id: 'p11', divid: 'drop_C', columnindex: 1 },
            { id: 'p13', divid: 'drop_C', columnindex: 2 },
            { id: 'p14', divid: 'drop_C', columnindex: 3 },
            { id: 'p17', divid: 'drop_D', columnindex: 2 },
            { id: 'p8', divid: 'drop_D', columnindex: 1 }
        ];
    }
    else if (type == "维修监督") {
        userData = [
            { id: 'p1', divid: 'drop_A', columnindex: 2 },
            { id: 'p2', divid: 'drop_A', columnindex: 3 },
            { id: 'p3', divid: 'drop_A', columnindex: 4 },
            { id: 'p15', divid: 'drop_A', columnindex: 5 },
            { id: 'p4', divid: 'drop_B', columnindex: 1 },
            { id: 'p5', divid: 'drop_B', columnindex: 2 },
            { id: 'p9', divid: 'drop_C', columnindex: 1 },
            { id: 'p11', divid: 'drop_C', columnindex: 2 },
            { id: 'p16', divid: 'drop_C', columnindex: 3 },
        ];
    }
    else {
        userData = [
            { id: 'p1', divid: 'drop_A', columnindex: 2 },
            { id: 'p2', divid: 'drop_A', columnindex: 3 },
            { id: 'p3', divid: 'drop_A', columnindex: 4 },
            { id: 'p4', divid: 'drop_B', columnindex: 1 },
            { id: 'p5', divid: 'drop_C', columnindex: 1 },
            { id: 'p6', divid: 'drop_C', columnindex: 2 },
            { id: 'p7', divid: 'drop_D', columnindex: 1 },
            { id: 'p8', divid: 'drop_D', columnindex: 2 }
        ];
    }
    if (userData.length > 0) {
        //按照顺序排序
        userData.sort(function (x, y) {
            return x.columnindex - y.columnindex;
        });
        for (let z = 0; z < userData.length; z++)
            createPanel(userData[z]);
    }
}
//初始化拖拽区域事件
function LoadRegion() {
    for (let index = 0; index < dropdiv.length; index++) {
        let moveItemId = -1;
        //获取对象
        let g1 = document.getElementById(dropdiv[index].id);
        //设置配置
        let ops1 = {
            animation: 1000,
            draggable: ".item",
            sort: true,
            group: {
                name: "itxst.com",
                pull: true,
                put: true
            },
            //*********  拖拽中的事件 *********
            onMove: function (evt, originalEvent) {
                /*
                    evt.dragged; // 被拖拽的对象
                    evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
                    evt.related; // 被替换的对象
                    evt.relatedRect; // DOMRect
                    evt.willInsertAfter; // 是在被替换对象的前面还是后面
                    originalEvent.clientY; // 鼠标的位置
                    */
                changePanelWidth(evt);
                // return false 将来取消拖拽;
                return true;
            },
            //开始拖动记录下用户点击的那个元素
            onStart: function (evt) {
                moveItemId = evt.clone.dataset.id;
            },
            //拖动结束
            onEnd: function (evt) {
                console.log(evt);
                // if (evt.to.id != "drop_D") {
                //     let movePanelID = evt.clone.dataset.id;

                // }
                //获取拖动后的排序
                var arr = sortable1.toArray();
                // document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);
            },
        };
        //初始化
        let sortable1 = Sortable.create(g1, ops1);
    }
}
// 在移动时，根据移动位置计算面板大小，改变面板大小，适应移动目标的宽度
function changePanelWidth(evt) {
    let movetoID = evt.to.id;
    let moveItemId = evt.dragged.id;
    let width = $('#' + movetoID).width();
    let childID = $('#' + moveItemId).attr("childid");
    let thispanel = $.grep(panels, function (n, i) {
        return n.id == childID;
    });
    //动态设置高度
    if (thispanel.length > 0) {
        if (movetoID != "drop_D") {
            if (thispanel[0].doubleheight != undefined && thispanel[0].doubleheight != "") {
                $('#' + childID).panel({
                    height: thispanel[0].doubleheight
                });
            }
        } else {
            $('#' + childID).panel({
                height: thispanel[0].height
            });
        }
    }
    $('#' + childID).panel({
        width: width - panelpadding * 2
    });
    $.parser.parse($('#' + childID));
    $.parser.parse($('#' + moveItemId));
    $.parser.parse($('#' + movetoID));
    // SetHeight();
}
// function SetHeight() {
//     let divA_H = 0;
//     let divB_H = 0;
//     let divC_H = 0;
//     let divD_H = 0;

//     for (let index = 0; index < dropdiv.length; index++) {
//         let dropdivID = dropdiv[index].id;
//         let child = $('#' + dropdivID + ' .item');
//         let thisdivHeight = 30;
//         for (let z = 0; z < child.length; z++) {
//             let element = child[z];
//             let dragID = element.id;
//             let panelID = $('#' + dragID).attr("childid");
//             let thispanel = $.grep(panels, function (n, i) {
//                 return n.id == panelID;
//             });
//             thisdivHeight = thisdivHeight + thispanel[0].height;
//         }
//         if (dropdivID == "drop_A") divA_H = thisdivHeight;
//         if (dropdivID == "drop_B") divB_H = thisdivHeight;
//         if (dropdivID == "drop_C") divC_H = thisdivHeight;
//         if (dropdivID == "drop_D") divD_H = thisdivHeight;
//     }

//     let height1 = 0;
//     let height2 = 0;
//     height2 = divB_H > divC_H ? divB_H : divC_H;
//     height1 = divA_H > (height2 + divD_H) ? divA_H : (height2 + divD_H);
//     $('#div_All').css("height", height1 + "px");
//     $('#div_rightAll').css("height", height1 + "px");
//     $('#div_rightup').css("height", height1 + "px");
//     $('#drop_A').css("height", divA_H + "px");
//     $('#drop_B').css("height", height2 + "px");
//     $('#drop_C').css("height", height2 + "px");
//     $('#drop_D').css("height", divD_H + "px");
//     // $('#div_rightAll').css({
//     //     height: height1
//     // });
//     // $('#div_rightup').css({
//     //     height: height1
//     // });
//     // $('#drop_A').css({
//     //     height: divA_H
//     // });
//     // $('#drop_B').css({
//     //     height: height2
//     // });
//     // $('#drop_C').css({
//     //     height: height2
//     // });
//     // $('#drop_D').css({
//     //     height: divD_H
//     // });
//     $.parser.parse($('#div_All'));
//     $.parser.parse($('#div_rightAll'));
//     $.parser.parse($('#div_rightup'));
//     $.parser.parse($('#drop_A'));
//     $.parser.parse($('#drop_B'));
//     $.parser.parse($('#drop_C'));
//     $.parser.parse($('#drop_D'));

// }
//设置可拖拽面板内间距
const panelpadding = 3;
//动态创建拖拽面板
function createPanel(obj) {
    let thispanel = $.grep(panels, function (n, i) {
        return n.id == obj.id;
    });
    if (thispanel.length > 0) {
        //获取面板宽度，需要减去padding*2
        let panelwidth = $('#' + obj.divid).width() - panelpadding * 2;
        //创建可移动的div   
        let dragdiv = '<div class="item"  childid="' + thispanel[0].id +
            '" data-id="' + thispanel[0].id +
            '" id="drag' + thispanel[0].id +
            '" style="padding: ' + panelpadding +
            'px;"></div>';
        //可移动的div拼接到相应区域
        $('#' + obj.divid).append(dragdiv);

        let thispanelheight = thispanel[0].height;
        if (obj.divid != "drop_D" && thispanel[0].doubleheight != undefined && thispanel[0].doubleheight > 0)
            thispanelheight = thispanel[0].doubleheight;

        //创建面板区域
        let dragpanel = '<div id="' + thispanel[0].id +
            '"  class="easyui-panel"  style="width:' + panelwidth + 'px;height:' +
            thispanelheight + 'px;"' +
            " data-options=\"headerCls:'Paneltitle' \"" +
            ' >';
        dragpanel += '<header>' + thispanel[0].title;
        //更多跳转按钮
        if (thispanel[0].hrefType != "" && thispanel[0].hrefType != undefined)
            dragpanel += "<a href=\"#\" onclick=\"openWin('" + thispanel[0].hrefType + "')\" style=\"float:right;text-decoration:none;font-size:12px;\">更多>>> </a>";
        dragpanel += "</header>"
        //嵌入页面
        dragpanel += ' <iframe scrolling="no" frameborder="0" width="95%" height="95%" id="Frame' +
            thispanel[0].id +
            '" src="' + thispanel[0].src + '?id=' + id + '"></iframe>';
        //结尾
        dragpanel += "</div>";


        //面板区域拼接到可移动的div
        let targetObj = $(dragpanel).appendTo("#drag" + thispanel[0].id);
        //依次重新渲染DOM
        $.parser.parse(targetObj);
        $.parser.parse($('#' + thispanel[0].id));
        $.parser.parse($('#' + obj.divid));
        // SetHeight();
    }
}
//查看更多按钮
function openWin(type) {
    let url = "";
    switch (type) {
        //维修费用执行情况
        case "Repair_Cost_Info":
            url = "M_DataPage/Repair_Cost_Info/Repair_Cost_Info.html";
            break;
        //6S整改跟踪
        case "Rectify_reform":
            url = "M_DataPage/Rectify_reform/rectify_reform.html";
            break;
        //液货仓库存
        case "Liquid_Warehouse_Inventory":
            url = "M_DataPage/Liquid_Warehouse_Inventory/Inventory.html";
            break;
        //药剂情况
        case "Chem_Current_info":
            url = "M_DataPage/Chem_Current_info/Chem_Current_info.html";
            break;
        //设备运行参数
        case "Equipment_info":
            url = "M_DataPage/Equipment_info/Equipment_info.html";
            break;
        //资源消耗量
        case "ProductionUseQty":
            url = "M_DataPage/ProductionUseQty/ProductionUseQty.html";
            break;
        //产量
        case "ProductionQty":
            url = "M_DataPage/ProductionQty/ProductionQty.html";
            break;
        //库存
        case "StockBalance":
            url = "M_DataPage/StockBalance/StockBalance.html";
            break;
        //在船人数
        case "shipPeopleNum":
            url = "M_DataPage/Ship_People_Num/Ship_People_Num.html";
            break;
        //船运动态
        case "boatinfo":
            url = "M_DataPage/BoatInfo/BoatInfo.html";
            break;
        //待办事项
        case "waitwork":
            url = "M_DataPage/WaitWork/WaitWork.html";
            break;
        //当前工单
        case "workorder":
            url = "M_DataPage/WorkOrder/WorkOrder.html";
            break;
        //工作计划
        case "workplan":
            url = "M_DataPage/WorkPlan/WorkPlan.html";
            break;
        //外输动态
        case "produnct_transport":
            url = "M_DataPage/Product_Transport/Product_Transport.html";
            break;
        //平台监控
        case "Platform_Site":
            url = "M_DataPage/Platform_Site/Platform_Site.html";
            break;
        default:
            break;
    }
    window.location.href = url + '?id=' + id;
}
//保存panel位置数据
function SavePanel() {
    let newpanels = [];
    for (let index = 0; index < dropdiv.length; index++) {
        let dropdivID = dropdiv[index].id;
        let child = $('#' + dropdivID + ' .item');
        for (let z = 0; z < child.length; z++) {
            let element = child[z];
            let dragID = element.id;
            let panelID = $('#' + dragID).attr("childid");
            newpanels.push({ id: panelID, divid: dropdivID, columnindex: z + 1 });
        }
    }
    console.log(newpanels);
}
//获取页头 在船天数、待审批工单数量、待审批订单数量
function GetTitleNum() {
    let data = { "DateCount": "10", "workCount": "10", "orderCount": "10" }

}
//获取天气信息
function GetWeather() {
    let url = path + '/ls172/index/weather/get'
    $.ajax({
        url: url,
        type: "get",
        async: false,
        data: { date: '2021-10-15' },
        success: function (data) {
            console.log(data);
            if (data.code == "200") {
                if (data.data.records.length > 0) {
                    var Weatherdata = data.data.records[0];
                    $('#lab_Date').html(Weatherdata.theDate);
                    // 11 °C 多云
                    $('#lab_Weather').html(Weatherdata.temperature + " °C  " + Weatherdata.weatherState);
                    // 湿度 77% 风速 ：10m/s 风向：北风
                    $('#lab_Weather2').html("湿度：" + Weatherdata.humidity + "%   风速：" + Weatherdata.windSpeed + "m/s   风向：" + Weatherdata.windDirection);
                    // 浪高:2m 流速：2m/s 流向：西北方向
                    $('#lab_Weather3').html("浪高：" + Weatherdata.waveHeight + "m   流速：" + Weatherdata.currentSpeed + "m/s   流向：" + Weatherdata.flowDirection);
                }
            } else {
                $.messager.show({
                    title: '提示',
                    msg: '天气信息获取失败！',
                    showType: 'show',
                    style: {
                        right: '',
                        top: document.body.scrollTop + document.documentElement.scrollTop,
                        bottom: ''
                    }
                });

            }
        }
    });
}

//获取页脚 外输信息
function Getfooter() {

}




























// function LoadRegion2() {
//     //第一组
//     var moveItemId = -1;
//     var g1 = document.getElementById('drop_A');
//     var ops1 = {
//         animation: 1000,
//         draggable: ".item",
//         sort: true,
//         group: {
//             name: "itxst.com",
//             pull: true,
//             put: true
//         },
//         //*********  拖拽中的事件 *********
//         onMove: function (evt, originalEvent) {
//             /*
//                 evt.dragged; // 被拖拽的对象
//                 evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
//                 evt.related; // 被替换的对象
//                 evt.relatedRect; // DOMRect
//                 evt.willInsertAfter; // 是在被替换对象的前面还是后面
//                 originalEvent.clientY; // 鼠标的位置
//                 */
//             changePanelWidth(evt);
//             console.log(evt);
//             // return false 将来取消拖拽;
//             return true;
//         },
//         //开始拖动记录下用户点击的那个元素
//         onStart: function (evt) {
//             moveItemId = evt.clone.dataset.id;

//         },
//         //拖动结束
//         onEnd: function (evt) {
//             console.log("A" + evt);
//             //获取拖动后的排序
//             var arr = sortable1.toArray();
//             // document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);
//         },
//     };
//     var sortable1 = Sortable.create(g1, ops1);
//     //第二组
//     var g2 = document.getElementById('drop_B');
//     var ops2 = {
//         animation: 1000,
//         draggable: ".item",
//         sort: true,
//         group: { name: "itxst.com", pull: true, put: true },
//         //开始拖动记录下用户点击的那个元素
//         onStart: function (evt) {
//             moveItemId = evt.clone.dataset.id;
//         },
//         //*********  拖拽中的事件 *********
//         onMove: function (evt, originalEvent) {
//             /*
//                 evt.dragged; // 被拖拽的对象
//                 evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
//                 evt.related; // 被替换的对象
//                 evt.relatedRect; // DOMRect
//                 evt.willInsertAfter; // 是在被替换对象的前面还是后面
//                 originalEvent.clientY; // 鼠标的位置
//                 */
//             changePanelWidth(evt);
//             console.log(evt);
//             // return false 将来取消拖拽;
//             return true;
//         },
//         //拖动结束
//         onEnd: function (evt) {
//             console.log(evt);
//             //获取拖动后的排序
//             var arr = sortable2.toArray();
//             // document.getElementById("msg").innerHTML = "B组排序结果：" + JSON.stringify(arr);
//         },
//     };
//     var sortable2 = Sortable.create(g2, ops2);
//     //第三组
//     var g3 = document.getElementById('drop_C');
//     var ops3 = {
//         animation: 1000,
//         draggable: ".item",
//         sort: true,
//         group: { name: "itxst.com", pull: true, put: true },
//         onStart: function (evt) {
//             moveItemId = evt.clone.dataset.id;
//         },
//         //*********  拖拽中的事件 *********
//         onMove: function (evt, originalEvent) {
//             /*
//                 evt.dragged; // 被拖拽的对象
//                 evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
//                 evt.related; // 被替换的对象
//                 evt.relatedRect; // DOMRect
//                 evt.willInsertAfter; // 是在被替换对象的前面还是后面
//                 originalEvent.clientY; // 鼠标的位置
//                 */
//             changePanelWidth(evt);
//             console.log(evt);
//             // return false 将来取消拖拽;
//             return true;
//         },
//         //拖动结束
//         onEnd: function (evt) {
//             console.log("C" + evt);
//             //获取拖动后的排序
//             var arr = sortable3.toArray();
//             // document.getElementById("msg").innerHTML = "C组排序结果：" + JSON.stringify(arr);
//         },
//     };
//     var sortable3 = Sortable.create(g3, ops3);
//     //第四组
//     var g4 = document.getElementById('drop_D');
//     var ops4 = {
//         animation: 1000,
//         draggable: ".item",
//         sort: true,
//         group: { name: "itxst.com", pull: true, put: true },
//         onStart: function (evt) {
//             moveItemId = evt.clone.dataset.id;
//         },
//         //*********  拖拽中的事件 *********
//         onMove: function (evt, originalEvent) {
//             /*
//                 evt.dragged; // 被拖拽的对象
//                 evt.draggedRect; // 被拖拽的对象所在区域 {left, top, right, bottom}
//                 evt.related; // 被替换的对象
//                 evt.relatedRect; // DOMRect
//                 evt.willInsertAfter; // 是在被替换对象的前面还是后面
//                 originalEvent.clientY; // 鼠标的位置
//                 */
//             changePanelWidth(evt);
//             console.log(evt);
//             // return false 将来取消拖拽;
//             return true;
//         },
//         //拖动结束
//         onEnd: function (evt) {
//             console.log("D" + evt);
//             //获取拖动后的排序
//             var arr = sortable3.toArray();
//             // document.getElementById("msg").innerHTML = "D组排序结果：" + JSON.stringify(arr);
//         },
//     };
//     var sortable4 = Sortable.create(g4, ops4);
// }